<template>
  <div id="login">
    <div class="cchat">
      <header>
        <div>
          <section>电话语音</section>
        </div>
        <div class="header_right" @click="goLogin('form')">
          <span></span>
          <span>离线</span>
        </div>
      </header>
      <footer>
        <!-- <el-select v-model="value" placeholder="请选择监听坐席" size="mini" @change="changPhone">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </footer>
    </div>
    <div class="qn_login">
      <div class="">
        <div style="text-align: center; margin-bottom: 15px;margin-top:15px; color:#409EFF">Agent Login</div>
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          :rules="rules"
          id="hh"
        >
          <!-- <el-form-item label="" class=""> </el-form-item> -->
          <el-form-item label="企业编号" class="input" prop="entNum">
            <el-input
              v-model="form.entNum"
              size="mini"
              placeholder="请输入企业编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="坐席编号" class="input" prop="agentId">
            <el-input
              v-model="form.agentId"
              size="mini"
              placeholder="请输入坐席编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="坐席密码" class="input" prop="pwd">
            <el-input
              placeholder="请输入密码"
              v-model="form.pwd"
              show-password
              size="mini"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="坐席分机" class="input">
            <el-input
              v-model="form.tel"
              size="mini"
              placeholder="请输入坐席分机"
            ></el-input>
          </el-form-item> -->
          <el-form-item class="input" label=""></el-form-item>
          <!-- <el-form-item label="" class="input"> -->
            <el-checkbox v-model="rememberLoginInfo">记住登录信息</el-checkbox>
            <el-checkbox v-model="form.forceLogin">强制登录</el-checkbox>
            <el-checkbox v-model="form.sipUseCphone">使用Cphone</el-checkbox>
          <!-- </el-form-item> -->
        </el-form>
        <div class="login_button">
          <el-button
            type="primary"
            size="small"
            class="login"
            @click="goLogin('form')"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        entNum: "", //企业编号
        agentId: "", //坐席工号
        pwd: "", //坐席密码
        tel: "", //坐席分机
        forceLogin: false, //强制登录
        sipUseCphone:false //是否使用Cphone
      },
      rememberLoginInfo: true, //记住登录信息
      rules: {
        entNum: [
          { required: true, message: "请输入企业编号", trigger: "change" },
        ],
        agentId: [
          { required: true, message: "请输入坐席工号", trigger: "change" },
        ],
        pwd: [{ required: true, message: "请输入坐席密码", trigger: "change" }],
      },
      options: [
        {
          value: "18335722912",
          label: "18335722912",
        },
        {
          value: "15735513358",
          label: "15735513358",
        },
      ],
      value: "", //select的model值
    };
  },
  mounted(){
    if (window.localStorage.getItem("web_was")) {
      const userInfo = JSON.parse(window.localStorage.getItem("web_was"));
      if (this.rememberLoginInfo) {
        console.log("用户info:",userInfo);
        this.form = userInfo;
        this.form.forceLogin = this.form.forceLogin == true ? true : false;
        this.rememberLoginInfo = true
      } else {
        window.localStorage.removeItem('web_was')
      }
      
    }
    this.value=this.$route.params.value || this.options[0].value
  },
  methods: {
    //登录
    goLogin(checkForm) {
      this.$refs[checkForm].validate((valid) => {
        if (valid) {
          this.$router.push({ name: 'makecall', params: { agentId: this.form.agentId,targetAgentId:this.options,value: this.value}});
          window.localStorage.setItem("web_was", JSON.stringify(this.form));
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      
    },
  },
};
</script>
<style lang="scss">
.qn_login .el-form-item__label,
.qn_login .el-checkbox__label {
  color: black;
  font-size: 13px;
}
.qn_login .el-form-item__error {
  padding: 0;
  font-size: 5px;
}
.cchat .el-input--mini .el-input__inner{
  border-radius: 50px;
}
</style>
<style lang="scss" scoped>
#login{
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-content: center;
  padding-top: 100px;
    .qn_login {
    width: 350px;
    height: 330px;
    color: black;
    padding: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 0 8px rgba(0, 0, 0, 0.04);
    // background-image: url("../../image/img.jpg");
    background-size: 370px 350px;
    margin-top: 180px;
    .input {
      margin-bottom: 10px;
    }
    .login_button {
      display: flex;
      justify-content: center;
      align-items: center;
      .login {
        width: 100px;
        margin-top: 25px;
      }
    }
    .el-form-item {
      font-size: 30px;
    }
  }
  .cchat {
    width: 250px;
    height: 140px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .12), 0 0 8px rgba(0, 0, 0, .04);
    margin-right: 100px;
    header {
      height: 70px;
      border-bottom: 1px solid #dddddd;
      line-height: 70px;
      padding: 0px 10px;
      background-color: #f0f0f0;;
      div {
        display: inline-block;
      }
      .header_right {
        width: 40px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: relative;
        right: -100px;
        font-size: 12px;
        padding: 0 10px;
        border: 1px solid #dddddd;
        border-radius: 15%;
        cursor: pointer;
        span:first-child {
          display: inline-block;
          width: 8px;
          height: 8px;
          background-color: grey;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
      .header_right:hover {
        border-radius: 10%;
        border: 1px solid grey;
      }
    }
    footer {
      height: 70px;
      border-bottom: 1px solid #dddddd;
      text-align: center;
      line-height: 70px;
    }
  }
}

</style>
